<template>
  <div ref="myChart" style="height: 100%" v-on:mouseout="scrollFun" v-on:mouseover="pauseScroll"></div>
</template>
<script>
export default {
  name: 'dashPillar',
  props: {
    dataR: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      myChart: undefined,
      timeOut: null,
      option: null,
      startValue: 0,
      endValue: 5,
      toPlan: 'sjxmjhgl-ndsjjhzd',
      toProject: 'sjxmzygl-xmgdgl'
    }
  },
  created() {
  },
  mounted() {
    this.drawLine()
    window.addEventListener('resize', this.resize)
  },
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs.myChart)
      this.scrollFun()
      this.myChart.on('dataZoom', () => {
        this.startValue = this.myChart.getModel().option.dataZoom[0].startValue
        this.endValue = this.myChart.getModel().option.dataZoom[0].endValue
      })

      this.myChart.on('click', (param) => {
        const { dataIndex, seriesIndex } = param
        if (seriesIndex === 0) { // 计划 跳转到计划
          this.jumpTo({
            to: this.toPlan,
            unitUnderAudit: this.dataR[dataIndex].unitUnderAudit
          })
        } else { // 完成  跳转到作业
          this.jumpTo({
            to: this.toProject,
            unitUnderAudit: this.dataR[dataIndex].unitUnderAudit
          })
        }
      })

      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 50
        },
        grid: {
          top: 30,
          left: 70,
          right: 20,
          bottom: 30
        },
        xAxis: {
          name: '',
          type: 'value',
          splitLine: {
            lineStyle: {
              type: [8, 3]
            },
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#c4c4c4'
            }
          }
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            offset: 3,
            data: this.dataR.map(item => item.name),
            axisLabel: {
              show: true,
              fontSize: 12,
              color: '#404040',
              width: 60,
              overflow: 'truncate',
              ellipsis: '..'
            },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                width: 0.5
              }
            }
          }

        ],

        dataZoom: [
          /*{
            type: 'slider',
            show: true,
            yAxisIndex: 0,
            startValue: this.startValue,
            endValue: this.endValue,
            zoomLock: true,
            rangeMode: ['value', 'value'],
            width: 8,
            right: 20,
            bottom: 20,
            handleSize: 0,
            brushSelect: false
          },*/
          {
            type: 'inside',
            moveOnMouseWheel: true,
            zoomOnMouseWheel: false,
            moveOnMouseMove: false,
            yAxisIndex: 0,
            startValue: this.startValue,
            endValue: this.endValue
          }
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            data: this.dataR.map(item => item.value.jh || 0),
            barMaxWidth: 13,
            itemStyle: {
              color: '#1961AC',
              borderRadius: 4
            }
          },
          {
            name: '完成',
            type: 'bar',
            data: this.dataR.map(item => item.value.wc || 0),
            barMaxWidth: 13,
            itemStyle: {
              color: '#FAAD14',
              borderRadius: 4
            }
          }
        ]
      }

      this.myChart.setOption(this.option)
    },

    //自动滚动
    scrollFun() {
      if (this.timeOut) {
        clearInterval(this.timeOut)
        this.timeOut = null
      }
      this.timeOut = setInterval(() => {
        if (this.endValue === this.dataR.length - 1) {
          this.startValue = 0
          this.endValue = 5
        } else {
          this.startValue++
          this.endValue++
        }

        this.option.dataZoom[0].startValue = this.startValue
        this.option.dataZoom[0].endValue = this.endValue
        this.myChart.setOption(this.option)
      }, 3000)
    },

    pauseScroll() {
      if (this.timeOut) {
        clearInterval(this.timeOut)
        this.timeOut = null
      }
    },

    resize() {
      this.myChart.resize()
    },

    jumpTo(record) {
      this.$router.push({ name: record.to, params: { unitUnderAudit: record.unitUnderAudit } })
    }
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.resize)
    clearInterval(this.timeOut)
  }
}
</script>

<style scoped>
</style>